<template>
  <div>
    <el-table v-loading="tableData==''" :data="tableData" style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column label="学号" prop="stuId" align="center">
      </el-table-column>
      <el-table-column label="姓名" prop="stuName" align="center">
      </el-table-column>
      <el-table-column label="学院" prop="stuDept" align="center">
      </el-table-column>
      <el-table-column label="性别" prop="stuSex" align="center">
      </el-table-column>
      <el-table-column  label="听课数" prop="listenCount" align="center">
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination layout="prev, pager, next" :total=totalCount @current-change="handleCurrentChange">
      </el-pagination>      
    </div>
  </div>
    
</template>

<style scoped>
.pager{margin-top:35px;text-align:center;}
</style>

<script>
  export default {
    data() {
      return {
        tableData: [],
        page: 1,
        currentPage: 1,
        totalCount: 0
      }
    },
    methods:{
      handleCurrentChange(val) {
        this.getData(val)
      },
      getData(page){
        var _this = this
        this.$ajax.get('/api/getRank?page=' + (page-1),_this.RePwd).then(function(response){
          _this.tableData = response.data.data.content
          _this.totalCount = response.data.data.totalElements
        }).catch(function(error){console.log(error);}); 
      }
    },
    created(){
      this.getData(this.page)      
    }
}
</script>